<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/jsp/manage/common/taglibs.jsp" %>
<script>
    var t;
    var t1;
    var t2;
    var hide_cideo=0;
    var showplayer;
    var devshow1 = null;
    var time=[];
    $(function () {
        clearInterval(t);
        clearInterval(t1);

        //摄像头配置开始

        var urlarr=new Array();

        $(document).on("click","#cream",function () {
            $(".videoModule").show();
        })

        $(document).on("click",".videoModule",function () {
            $(".videoModule").hide();
        })
        loadcamera();
        //加载摄像头
        function loadcamera(){
            $.get("/camera/getCamera",{},function (data) {
                if(data.length==0){
                    alert("暂无摄像头配置信息");
                }else{
                    var length = data.length;
                    console.log(data);
                    for(var i=0;i<length;i++){
                        urlarr[i]=data[i];
                    }
                    loadVdior();
                }
            })
        }
        //加载视频
        function loadVdior(){
            var vw=$(".videoModule").width();
            var vh=$(".videoModule").height();
            var width=vw/7;
            var height=vh/5.5;
            var vdior='<li id="cream">\n' +
                      '   <video id="void1" class="video-js" controls preload="auto" width="'+width+'" height="'+height+'">\n' +
                      '    <source src="{url}" type="application/x-mpegURL">\n' +
                      '   </video>' +
                        ' <div class="mode"></div>' +
                      '</li>';
            var html=vdior.replace("{url}",urlarr[0]);
            $("#devul").append(html);
            play(0,"void1");
            vw=vw/2-20;
            vh=vh/2-10;
            var v='<div style="float:left"><video id="my-video{id}" class="video-js" style="margin: 0px auto" controls preload="auto" width="'+vw+'" height="'+vh+'">\n' +
                '    <source src="{url}" type="application/x-mpegURL">\n' +
                '  </video><div>'
            for(var i=0;i<urlarr.length;i++){
                var _html=v.replace("{id}",i).replace("{url}",urlarr[i]);
                $(".videoModule").append(_html);
                play(i+1,"my-video"+i);
            }
        }

        function play(index,id){
            videojs(id).ready(function(){
                var myPlayer = this;
                myPlayer.play();
                var tim=setInterval(function () {
                    myPlayer.ended();
                    myPlayer.play();
                },60000);
                time[index]=tim;
            });
        }
        //摄像头配置结束
        $(".navIcon").find('p').hide();
        $('.alert').hide();
        var count = 0;

        t = setInterval(function () {
            var $redDiv = $(".navIcon").find(".active").parent().parent();
            if(count >4){
                $('.alert').show()
            }else {
                $('.alert').hide()
            }
            if(count === 10){
                $('.navIcon').find('.last').removeClass('active').addClass("noActive").attr('src','').siblings().hide();
                $(".navIcon").find(".first").removeClass('noActive').addClass("active");
                count=-1;
            }

            $(".navIcon").find('.active').attr('src','/manage/assert/image/iconBg.png').siblings().show();
            $redDiv.next().find('img').removeClass('noActive').addClass("active");
            $redDiv.prev().find('.active').removeClass('active').addClass("noActive").attr('src','').siblings().hide();
            count++;
        }, 1000);

        t1 = setInterval(function () {
            wsd();
            dly();
            ups();
            kongtiao1();
            kongtiao2()
        }, 60000);
        wsd();
        dly();
        ups();
        kongtiao1();
        kongtiao2()
    });

    function openPage(title,url) {
        var videos = $("video");
        if(videos.length>0){
            for (var i=0;i<videos.length;i++){
                if (typeof (videos.eq(i)) != "undefined") {
                    var myPlayer = videojs(videos.eq(i).attr("id"));
                    myPlayer.dispose();
                }
            }
        }
        for (var i=0;i<time.length;i++){
            clearInterval(time[i]);
        }
        manage_sys_opens(title,url);
    }
    
    function wsd() {
        $.post("/public/temperaturehumidity.html",function (r) {
            $("#secondaryPages_wsd span[name='ejcdw']").text(r.temperature);
            $("#secondaryPages_wsd span[name='ejcds']").text(r.humidity);
            $("#secondaryPages_wsd span[name='voltage1']").text(r.voltage);
        })
    }
    function dly() {
        $.post("/public/electricityMeter.html",function (r) {
            $("#secondaryPages_dly span[name='dy']").text(r.avoltage);
            $("#secondaryPages_dly span[name='dl']").text(r.acurrent);
            $("#secondaryPages_dly span[name='gl']").text(r.aavailablePower);
        })
    }
    function ups() {
        $.post("/public/ups.html",function (r) {
            $("#secondaryPages_ups span[name='acVoltagea']").text(r.acInVoltagea.toFixed(2));
            $("#secondaryPages_ups span[name='loadPercentagea']").text(r.loadPercentagea.toFixed(2));
            if(r.field83==0){
                $("#secondaryPages_ups span[name='field83']").text("离线");
            }else {
                $("#secondaryPages_ups span[name='field83']").text("在线");
            }

        })
    }
    function kongtiao1() {
        $.post("/public/airConditioningUps1.html",function (entity) {
            if (entity.airconditioningrunstate==7) {
                $("#secondaryPages_wsd span[name='airconditioningrunstate1']").text("系统开机");
            } else if (entity.airconditioningrunstate==0) {
                $("#secondaryPages_wsd span[name='airconditioningrunstate1']").text("本地关机");
            } else if (entity.airconditioningrunstate==1) {
                $("#secondaryPages_wsd span[name='airconditioningrunstate1']").text("远程关机");
            } else if (entity.airconditioningrunstate==2) {
                $("#secondaryPages_wsd span[name='airconditioningrunstate1']").text("监控关机");
            } else if (entity.airconditioningrunstate==3) {
                $("#secondaryPages_wsd span[name='airconditioningrunstate1']").text("组网待机");
            } else if (entity.airconditioningrunstate==4) {
                $("#secondaryPages_wsd span[name='airconditioningrunstate1']").text("电源保护");
            }else if (entity.airconditioningrunstate==5) {
                $("#secondaryPages_wsd span[name='airconditioningrunstate1']").text("气流保护");
            }else if (entity.airconditioningrunstate==6) {
                $("#secondaryPages_wsd span[name='airconditioningrunstate1']").text("压机锁定");
            }else {
                $("#secondaryPages_wsd span[name='airconditioningrunstate1']").text("本地关机");
            }
            // if(r.airconditioningrunstate==7){
            //     $("#secondaryPages_wsd span[name='airconditioningrunstate1']").text('系统运行');
            //     $("#secondaryPages_wsd span[name='airconditioningrunstate1']").css('color','green');
            // }else {
            //     $("#secondaryPages_wsd span[name='airconditioningrunstate1']").text('系统停止');
            //     $("#secondaryPages_wsd span[name='airconditioningrunstate1']").css('color','#ecf0f5');
            // }

        })
    }
    function kongtiao2() {
        $.post("/public/airConditioningUps2.html",function (entity) {
            if (entity.airconditioningrunstate==7) {
                $("#secondaryPages_wsd span[name='airconditioningrunstate2']").text("系统开机");
            } else if (entity.airconditioningrunstate==0) {
                $("#secondaryPages_wsd span[name='airconditioningrunstate2']").text("本地关机");
            } else if (entity.airconditioningrunstate==1) {
                $("#secondaryPages_wsd span[name='airconditioningrunstate2']").text("远程关机");
            } else if (entity.airconditioningrunstate==2) {
                $("#secondaryPages_wsd span[name='airconditioningrunstate2']").text("监控关机");
            } else if (entity.airconditioningrunstate==3) {
                $("#secondaryPages_wsd span[name='airconditioningrunstate2']").text("组网待机");
            } else if (entity.airconditioningrunstate==4) {
                $("#secondaryPages_wsd span[name='airconditioningrunstate2']").text("电源保护");
            }else if (entity.airconditioningrunstate==5) {
                $("#secondaryPages_wsd span[name='airconditioningrunstate2']").text("气流保护");
            }else if (entity.airconditioningrunstate==6) {
                $("#secondaryPages_wsd span[name='airconditioningrunstate2']").text("压机锁定");
            }else {
                $("#secondaryPages_wsd span[name='airconditioningrunstate2']").text("本地关机");
            }
        })
    }
</script>
<style>
    .camera{
        position: relative;
        color: #ecf0f5;
    }
    .camera ul{
        padding-top: 2px;
        padding-left: 11px;
    }
    .camera ul li {
        width: 90%;
        float: left;
        display: flex;
        flex-direction: row;
        margin-left:3px;
        justify-content: flex-start;
        position: relative;
    }
    .mode{
        position: absolute;
        top: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.0);
    }
    video{
        float: left;
    }
    .videoModule{
        position: absolute;
        top: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.9);
        padding-top: 5%;
        display: none;
    }
    .videoModule video{
       float: left;
       width: 70%;
       margin-left: 15%;
       height: 80%;
    }
    .videoModule .hidevideo{
        position: absolute;
        top: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.3);
        z-index:999;
    }
</style>
<div class="bodySec" style="position: relative">
    <div style="position: absolute;left: 20px;top:10px ; width: 70px; text-align: center;color: #47a6f5;cursor:pointer;border: 1px solid  #47a6f5;line-height: 28px"
         onclick="openPage('首页','/manage/demo/powerPage/toIndex.html')">返回</div>
    <div class="container">
        <div class="EMStop EMStop2"></div>
        <div class="EMSSenContent">
            <div class="left">
                <div class="EMSinfos sEMSinfos1">
                    <p style="margin-bottom: 0px">湿温度</p>
                    <div  id="secondaryPages_wsd">
                        <img  onclick="openPage('温湿度','/manage/demo/powerPage/tohumidityeTmperature.html')" src="/manage/assert/image/senced-wdj.png" alt=""
                              style="width: 50px;height: 70px;margin-top: 2px">
                        <ul style="text-align: left;width: 120px">
                            <li>温度: <span class="green" name="ejcdw"></span>&#8451;</li>
                            <li>湿度: <span class="green" name="ejcds"></span>%</li>
                           <%-- <li>连接状态: <span class="green">连接</span></li>--%>
                            <li>空调1: <span name="airconditioningrunstate1">运行</span></li>
                            <li>空调2: <span name="airconditioningrunstate2">关闭</span></li>
                        </ul>
                    </div>
                </div>
                <div class="EMSinfos sEMSinfos">
                    <p style="margin-top: 10px">市电</p>
                    <div  id="secondaryPages_dly">
                        <img  onclick="openPage('市电量仪','/manage/demo/powerPage/topowerOutput.html')" src="/manage/assert/image/senced-sd.png" alt="" style="width: 58px;height: 60px">
                        <ul style="text-align: left;width: 120px">
                            <li>电压: <span class="green" name="dy"></span>V</li>
                            <li>电流: <span class="green" name="dl"></span>A</li>
                            <li>功率: <span class="green" name="gl"></span></li>
                          <%-- <#-- <li>连接状态: <span class="green"  name="zt">在线</span></li>-->--%>
                        </ul>
                    </div>
                </div>
                <div class="EMSinfos sEMSinfos1">
                    <p>UPS</p>
                    <div id="secondaryPages_ups">
                        <img  onclick="openPage('ups电源输入监控','/manage/demo/powerPage/toupsState.html')" src="/manage/assert/image/senced-dy.png" alt="" style="width: 58px;height: 60px">
                        <ul style="text-align: left;width: 120px">
                            <li>电压: <span class="green" name="acVoltagea"></span>V</li>
                            <li>负载: <span class="green" name="loadPercentagea"></span>w</li>
                            <li>连接状态: <span  name="field83">在线</span></li>
                         <%--  <#-- <li>故障提醒: <span name="gztx">无</span></li>-->--%>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="center">
                <div class="center-1">
                    <p>机房图</p>
                    <img src="/manage/assert/image/senced_jf.png" alt="">
                </div>
                <div class="center-2">
                    <div>
                        <p style="float: left">导航</p>
                        <div class="navIcon" style="float: left;margin-left: 15%;margin-top: 10px">
                            <ul>
                                <li  onclick="openPage('市电量仪','/manage/demo/powerPage/topowerOutput.html')">
                                    <!--                            <li style="display: none"><div><img src="" alt="" class="first"></div></li>-->
                                    <div class="nav nav1"><img src="" alt="" class="active first"><p style="height: 30px !important">市电量仪</p></div></li>
                                <li onclick="openPage('温湿度','/manage/demo/powerPage/tohumidityeTmperature.html')">
                                    <div class="nav nav2"><img src="" alt="" class="noActive"><p style="height: 30px !important">温湿度</p></div></li>
                                <li onclick="openPage('空调系统','/manage/demo/powerPage/toairConditioner.html')">
                                    <div class="nav nav3"><img src="" alt="" class="noActive"><p style="height: 30px !important">空调系统</p></div></li>
                                <li onclick="openPage('消防系统','/manage/demo/powerPage/toaccessControl.html')">
                                    <div class="nav nav4"><img src="" alt="" class="noActive"><p style="height: 30px !important">消防系统</p></div>
                                </li>
                                <li onclick="openPage('开关量','/manage/demo/powerPage/tocabinetUps.html')">
                                    <div class="nav nav5"><img src="" alt="" class="noActive"><p style="height: 30px !important">断电检测</p></div>
                                </li>
                                <li onclick="openPage('ups系统','/manage/demo/powerPage/toupsState.html')">
                                    <div class="nav nav6" ><img src="" alt="" class="noActive"><p style="height: 30px !important">ups系统</p></div>
                                </li>
                                <li onclick="openPage('ups电量仪','/manage/demo/powerPage/toupsPowerInput.html')">
                                    <div class="nav nav7"><img src="" alt="" class="noActive"><p style="height: 30px !important;text-align: center">ups电量</p></div></li>
                                <li onclick="openPage('新风系统','/manage/demo/powerPage/tofreshAir.html')">
                                    <div class="nav nav8"><img src="" alt="" class="noActive"><p style="height: 30px !important">新风系统</p></div></li>
                                <li  onclick="openPage('门禁系统','/manage/demo/powerPage/todoor.html')">
                                    <div class="nav nav9"><img src="" alt="" class="noActive"><p style="height: 30px !important;text-align: center">门禁</p></div></li>
                                <li<%-- onclick="openPage('所有设备','/manage/demo/powerPage/toequipentAll.html')"--%>>
                                    <div class="nav nav10"><img src="" alt="" class="noActive last"><p style="height: 30px !important;text-align: center">所有设备</p></div></li>
                            </ul>
                        </div>
                    </div>



                </div>
            </div>
            <div class="right">
                <div class="EMSinfos right-1">
                    <p><img src="/manage/assert/image/senced-!.png" alt=""><span>警告信息</span></p>
                    <p class="alert" id="secondaryPages_error" style="color: red;font-size: 18px"></p>
                </div>
                <div class="EMSinfos right-2">
                    <p>消防系统</p>
                    <div class="right-center">
                        <div class="left" style="width: 45%;">
                            <img src="/manage/assert/image/senced-hy.png"  onclick="openPage('烟感','/manage/demo/powerPage/toaccessControl.html')" alt=""
                                 style="width: 40px; height:46px">
                            <p></p>
                        </div>
                        <ul>
                            <li>检测状态: <span class="green">连接</span></li>
                        </ul>
                    </div>
                </div>
                <div class="EMSinfos camera">
                    <ul id="devul">

                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="videoModule">

        <div class="hidevideo">

        </div>
    </div>
</div>

